<template>
    <div>
        <div class="table-div">
            <!-- 表格头部面板 -->
            <div class="table-panel">
                <!-- 
                  @keyup.native ---- 键盘松开事件
                  @keyup.enter.native ---- 回车事件
              -->
                <el-input v-model="search.keyword" placeholder="用户名/手机号查询" class="filter-item"
                    @keyup.enter.native="initTableData" @keyup.native="initTableData" />
                <el-button class="button-item" type="primary" icon="el-icon-edit" @click="addModel()">
                    新增
                </el-button>
                <!-- :loading="downloadLoading" 表示点击导出按钮的时候，是否显示正在加载 -->
                <el-button :loading="downloadLoading" class="button-item" type="primary" icon="el-icon-download"
                    @click="exportExcel()">
                    导出
                </el-button>
            </div>
            <!-- 
              表格
              @row-click ---- 行点击事件
              @select-all ---- 全选事件
              @select ---- 选择事件
              :default-sort="{ prop: 'id', order: 'descending' }"
          -->
            <el-table ref="list" id="table" :data="tableData.list" style="width: 100%; margin-top: 10px" border stripe
                highlight-current-row @sort-change="changeSort">
                <!-- 
                  sortable ---- 未开启后台分页时使用
                  sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件，执行事件的函数是我们自定义的,
                  该函数的参数接收到的值是一个对象，其中有个属性prop，其值就是<el-table-column> 标签的property值。
                  而下面的property的值要和<el-table>标签的:data绑定的对象的属性名一一对应。
              -->
                <el-table-column property="id" label="ID" width="80" align="center" sortable="custom">
                </el-table-column>
                <el-table-column property="userImage" show-overflow-tooltip label="头像" v-if="oprationShow" width="80"
                    align="center" sortable="custom">

                    <template slot-scope="scope">

                        <el-image :src="scope.row.userImage" width="60px" height="60px">
                        </el-image>

                    </template>

                </el-table-column>
                <el-table-column property="userName" label="用户名" width="200" align="center" sortable="custom">
                </el-table-column>
                <el-table-column property="email" label="邮箱" align="center" sortable="custom"> </el-table-column>
                <el-table-column property="userPhone" label="电话" width="220" align="center" sortable="custom">
                </el-table-column>
                <el-table-column property="role" label="权限" width="200" align="center" sortable="custom">
                </el-table-column>
                <el-table-column property="money" label="账户余额" width="200" align="center" sortable="custom">
                </el-table-column>
                <el-table-column label="操作" v-if="oprationShow" width="130" align="center">
                    <template slot-scope="scope">
                        <!-- scope.row，这里的row对象就是 该行的数据，对象中的属性名就是 <el-table>标签的:data绑定的对象的属性名 -->
                        <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                            @click="editModel(scope.row)"></el-button>
                        <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                            @click="deleteModel(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 
              分页
              :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
              @emitPageData ---- 子组件 $emit 函数定义的 key
              receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
          -->
            <Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
            <!-- 
              Model 编辑弹出窗
              :dialogData ---- 將 dialogData 作为参数传递给子组件 userEdit.vue
              @emitDialogData ---- 子组件 $emit 函数定义的 key
              receiveDialogData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
          -->
            <UserEdit :dialogData="dialogData" @emitDialogData="receiveDialogData"></UserEdit>
        </div>
    </div>
</template>
<script>
import * as FileSaver from 'file-saver'
// import XLSX from "xlsx";
import * as XLSX from 'xlsx/xlsx.mjs'
import Pagination from "@/components/fragments/Pagination.vue"
import UserEdit from "@/components/accounts/UserEdit.vue"
export default {
    name: "Users",
    components: {
        Pagination, UserEdit
    },
    data() {
        return {
            oprationShow: 'true',
            // 表格数据结构
            tableData: {
                pageNum: 1,
                pageSize: 5,
                total: 36,
                list:this.$TestData.usersData, // 当前页数据集合
            },
            // 查询参数
            search: {
                currentPage: 1,
                pageSize: 5,
                keyword: "",
                sort: "id",
                direction: "asc",
            },
            // 编辑窗口初始数据，showEditDialog: false，泽一开始不会显示模态框
            dialogData: {
                // 拥护id，如果为0则表示不存在的用户，也就是添加用户
                id: 0,
                // 是否显示编辑窗口
                showEditDialog: false,
            },
            // 是否显示 loading
            downloadLoading: false,
        }
    },
    methods: {
        //下载表格(有问题，只能下载当前页面的数据)
		exportExcel() {
			this.oprationShow = false    //不显示操作按钮
			this.$nextTick(function () {
				let wb = XLSX.utils.table_to_book(this.$refs.list.$el);
				let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
				try {
					//Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作
					FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户信息.xlsx')
				} catch (e) {
					if (typeof console !== 'undefined') console.log(e, wbout)
				}
				this.oprationShow = true   //显示操作按钮
				return wbout;
			})
		},
        // 初始化表单数据
        initTableData: function () {
            var self = this;

            this.$Request
                .fetch_("/api/rentuser/users", "post", self.search)
                .then((result) => {
                    self.tableData = result;
                     //遍历返回的list，修改图片地址，设置默认头像
                     self.tableData.list.forEach(element => {
                        if (element.userImage == null || element.userImage == '') {
                            element.userImage = '/img/default_big.jpg'
                        } else {
                            element.userImage = "http://127.0.0.1:8000" + element.userImage
                        }

                        //将权限名称修改，便于查看
                        if (element.role.includes("normal")) {
                            element.role = '普通用户'
                        } else {
                            element.role = '管理员'
                        }
                        if (element.userPhone==null||element.userPhone=='') {
                            element.userPhone='用户未设置'
                        }
                        if(element.email==null||element.email==''){
                            element.email='用户未设置'
                        }

                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        // 排序
        changeSort: function (obj) {
            this.search.sort = this.$Common.camecaseToLine(obj.prop);
            this.search.direction = obj.order == "descending" ? "desc" : "asc";
            this.initTableData();
        },
        // 接收子子组件数据的函数
        receivePageData: function (tableData) {
            this.search.currentPage = tableData.pageNum;
            this.search.pageSize = tableData.pageSize;
            this.initTableData();
        },
        // 接收表单数据
        receiveDialogData: function (showEditDialog) {
            this.dialogData.showEditDialog = showEditDialog;
            this.initTableData();
        },
        // 新增 model
        addModel: function () {
            this.dialogData = {
                id: 0,
                showEditDialog: true
            }
        },
        // 编辑 model
        editModel: function (row) {
            console.log(row);
            this.dialogData = {
                id: row.id,
                showEditDialog: true,
            };
        },
        // 删除 model
        deleteModel: function (row) {
            this.$confirm("确定要删除当前行吗？", "删除", {
				comfirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					var url = "/api/rentuser/user/" + row.id;
					this.$Request
						.fetch_(url, "delete", {})
						.then((result) => {
							if (result.status == this.$Request.OK_CODE) {
								this.$message({
									message: "删除成功",
									type: "success",
									duration: 2 * 1000,
								});
								this.search.currentPage = 1;
								this.initTableData();
							} else {
								this.$message.error(result.message);
							}
						})
						.catch(() => { });
				})
				.catch(() => { });
		},
    },
    mounted() {
        this.initTableData();
    },
};
</script>

<style>
.table-div {
    margin-top: 10px;
}

.filter-item {
    float: right;
    width: 200px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    /* margin-right: 5px; */
}

.button-item {
    float: left;
    width: 100px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 5px;
}
</style>
